<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      id="nav-bar"
      title="统计数据"
    ></u-navbar>
    <u-tabs
      :list="tabList"
      :is-scroll="false"
      :current="tabCurrent"
      @change="change"
    ></u-tabs>

    <view class="list">
      <view class="item">
        <view class="header">
          <view class="left">
            <image
              class="left-logo"
              src="/static/images/icon-jy.png"
              mode="widthFix"
            ></image>
            <text class="left-name">交易</text>
          </view>
          <view class="right">
            <text class="right-name">查看数据</text>
            <u-icon name="arrow-right" color="#CCCCCC" :size="24"></u-icon>
          </view>
        </view>
        <view class="dataShow">
          <view class="data">
            <view class="value">12012392.83</view>
            <view class="label">今日交易(元)</view>
          </view>
          <view class="data">
            <view class="value">1231.12</view>
            <view class="label">本月交易(万元)</view>
          </view>
          <view class="data">
            <view class="value">4192837.17</view>
            <view class="label">累计交易(万元)</view>
          </view>
        </view>
      </view>

      <view class="item">
        <view class="header">
          <view class="left">
            <image
              class="left-logo"
              src="/static/images/icon-sy.png"
              mode="widthFix"
            ></image>
            <text class="left-name">收益</text>
          </view>
        </view>
        <view class="dataShow">
          <view class="data">
            <view class="value">12012392.83</view>
            <view class="label">今日交易(元)</view>
          </view>
          <view class="data">
            <view class="value">1231.12</view>
            <view class="label">本月交易(万元)</view>
          </view>
          <view class="data">
            <view class="value">4192837.17</view>
            <view class="label">累计交易(万元)</view>
          </view>
        </view>
      </view>

      <view class="item">
        <view class="header">
          <view class="left">
            <image
              class="left-logo"
              src="/static/images/icon-tj.png"
              mode="widthFix"
            ></image>
            <text class="left-name">台均</text>
          </view>
        </view>
        <view class="dataShow">
          <view class="data">
            <view class="value">12012392.83</view>
            <view class="label">日台均(元)</view>
          </view>
          <view class="data">
            <view class="value">1231.12</view>
            <view class="label">月台均(元)</view>
          </view>
          <view class="data">
            <view class="value">4192837.17</view>
            <view class="label">平均台均(元)</view>
          </view>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-in">
        <view class="title">
          <text>近期交易走势</text>
          <image
            class="title-sign"
            src="/static/images/icon-tzgg.png"
            mode="widthFix"
          ></image>
          <view class="subsectionBox">
            <u-subsection
              bg-color="#F5F5F5"
              :list="subsectionList"
              :current="1"
            ></u-subsection
          ></view>
        </view>
        <view class="chart">
          <qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import service from '@/common/service';
import util from '@/common/utils';

export default {
  data() {
    return {
      tabList: [
        {
          name: '交易数据',
          count: 0,
        },
        {
          name: '设备数据',
          count: 0,
        },
        {
          name: '商户数据',
          count: 0,
        },
        {
          name: '未/伪数据',
          count: 0,
        },
      ],
      tabCurrent: 0,
      currentData: {},
      list: [],
      subsectionList: ['7天', '半年'],
    };
  },
  onLoad(e) {
    if (e.tab) {
      this.tabCurrent = Number(e.tab);
    }
  },
  methods: {
    customBack() {
      uni.switchTab({
        url: '/pages/my/index',
      });
    },
    getData() {
      const that = this;
      const param = {
        status: that.tabCurrent,
      };
      service.getTradePage(
        param,
        function (res) {
          if (res && res.data) {
            that.mescroll.endSuccess(res.data.data.length);
            if (page.num == 1) that.recordList = [];
            that.recordList = that.recordList.concat(res.data.data);
          }
        },
        function (res) {}
      );
    },
    change(index) {
      this.tabCurrent = index;
      this.list = [];
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  text-align: center;
  background-color: #f5f5f5;
}

.section {
  width: 100%;
  height: auto;
  padding: 0 30rpx;
  .section-in {
    width: 100%;
    height: auto;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
  }
  .title {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    text {
      position: relative;
      font-weight: 800;
      font-size: 28rpx;
      color: #333333;
      z-index: 9;
    }
    .title-sign {
      position: absolute;
      top: -10rpx;
      left: 130rpx;
      width: 32rpx;
      height: auto;
      z-index: 1;
    }
    .subsectionBox {
      width: 248rpx;
    }
  }
  .chart {
    position: relative;
    width: 100%;
    height: 300rpx;
    background: #ffffff;
    border-radius: 20rpx;
  }
}

.list {
  width: 100%;
  padding: 30rpx 30rpx 0;
  overflow: hidden;
  .item {
    float: left;
    margin-bottom: 30rpx;
    width: 100%;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .left-logo {
          width: 36rpx;
          height: auto;
        }
        .left-name {
          margin-left: 15rpx;
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
        }
      }
      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .right-name {
          margin-right: 15rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
    .dataShow {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      width: 100%;
      padding: 30rpx;
      background: #f7f7f7;
      border-radius: 16rpx;
      .data {
        flex: 1;
        min-width: 0;
        text-align: center;
        .value {
          font-family: DIN, sans-serif;
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
        }
        .label {
          margin-top: 12rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}

.mt0 {
  margin-top: 0 !important;
}
</style>
